<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="我的经纪人"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div v-show="orderlist.length != '0'">
      <div class="agentbox">
        <img src="../../assets/logo.png" alt="" />
        <div>
          <div><span class="tipbox">平台服务编号</span>8948914894891</div>
          <div><span class="tipbox">入驻平台时间</span>2021-09-01</div>
          <div><span class="tipbox">服务业主数量</span>2000人</div>
          <div>
            <span class="tipbox">服务质量星级</span>
            <van-rate
              v-model="value"
              :size="16"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
          <div>
            <span class="tipbox">经纪人标签</span
            ><span class="sort">服务好</span><span class="sort">态度好</span>
          </div>
        </div>
      </div>
      <div class="sercontent">
        <div>服务内容</div>
        <div>房源录入</div>
      </div>
      <div @click="jumptoorder" class="sercontent">
        <div>服务反馈</div>
        <div>去评价<van-icon name="arrow" /></div>
      </div>
      <div class="call">
        <span>拨打电话</span> 给 TA 或 <span>在线预约</span> 查询
      </div>
      <div class="cut"></div>
    </div>
    <div v-show="orderlist.length == '0'" class="noorder">暂无服务列表</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 4,
      orderlist: [],
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jumptoorder() {
      this.$router.push({ path: "/orderdetail" });
    },
  },
};
</script>

<style lang="less" scoped>
.agentbox {
  display: flex;
  margin: 0 15px;
  > img {
    width: 115px;
    height: 130px;
    margin-right: 20px;
  }
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    color: #333;
    .tipbox {
      display: inline-block;
      width: 90px;
    }
    .sort {
      display: inline-block;
      background-color: #ebfafd;
      color: #45b7cb;
      margin-right: 5px;
      padding: 1px 5px;
    }
  }
}
.sercontent {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  color: #333;
  > div {
    display: flex;
    align-items: center;
  }
}
.call {
  font-size: 14px;
  text-align: center;
  padding: 20px 0;
  color: #666;
  span {
    color: #45b7cb;
  }
}
.cut {
  height: 15px;
  background-color: #f1f1f1;
}
.noorder {
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
  color: #45b7cb;
}
</style>